
.photostack {
	.text-overlay {
		position: absolute;
		z-index: 999;
		top: 50%; left: 50%;
		@include translate(-50%, -50%);
		.h4 {
			color: #fff;
			letter-spacing: 0.14em;
		}
		.on-btn {
			margin-top: 40px;
		}
	}
	.bg-overlay {
		background-color: rgba(0,0,0,.5);
		z-index: 10;
	}
	figure {
		position: relative;
		display: inline-block;
		background: #fff;
		text-align: center;
		margin: 5px;
	}
}

.photostack-img {
	outline: none;
	display: block;
	background: #f9f9f9;
}

.photostack-back {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #fff;
	font-family: "Give You Glory", cursive;
	color: #a7a0a2;
	padding: 50px 40px;
	text-align: left;
	font-size: 22px;
	line-height: 1.25;
	z-index: 1;
	p {
		margin: 0;
		span {
			text-decoration: line-through;
		}

	}
}

.photostack-start nav {
	opacity: 0;
}
 
.js {
	.photostack {
		padding: 0;
		height: 450px;
		background: #ddd;
		position: relative;
		text-align: center;
		overflow: hidden;
		> .gallery {
			width: 100%;
			height: 100%;
			margin: 0 auto;
		}
		figure {
			width: 250px;
			height: 280px;
			padding: 20px;
			position: absolute;
			display: block;
			background: #fff;
			text-align: center;
			margin: 0;
		}
		nav {
			position: absolute;
			width: 100%;
			bottom: 30px;
			z-index: 90;
			text-align: center;
			left: 0;
			span {
				display: inline-block;
                opacity: 1;
                width: 9px; height: 9px;
                @include rounded(50%);
                background-color: #c7c7c7;
                margin: 8px;
                cursor: pointer;
                @include transition(all .3s linear);
                &.current {
                    background-color: $color;
                    @include scale(1.4);
                }
                &:last-child {
					margin-right: 0;
				}
                &:after {
					content: "\e600";
					font-family: 'icons';
					font-size: 80%;
					speak: none;
					display: inline-block;
					vertical-align: top;
					font-style: normal;
					font-weight: normal;
					font-variant: normal;
					text-transform: none;
					line-height: 30px;
					color: #fff;
					opacity: 0;
					-webkit-font-smoothing: antialiased;
					-moz-osx-font-smoothing: grayscale;
					-webkit-transition: opacity 0.3s;
					transition: opacity 0.3s;
					-webkit-backface-visibility: hidden;
					backface-visibility: hidden;
					.current.flip {
						-webkit-transform: scale(1) rotateY(-180deg) translateZ(-1px);
						transform: scale(1) rotateY(-180deg) translateZ(-1px);
						background-color: $color;
					}
					.flippable::after {
						opacity: 1;
						-webkit-transition-delay: 0.4s;
						transition-delay: 0.4s;
					}
				}
			}
		}
	}
}
.photostack-start {
	cursor: pointer;
	 nav {
		opacity: 0;
	}
}
.js .photostack-start::before {
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}
.js .photostack::before,
.js .photostack::after {
	opacity: 0;
	visibility: hidden;
}
.js .photostack-start::before,
.js .photostack-start:hover::after,
.touch .photostack-start::after  {
	opacity: 1;
	visibility: visible;
}
.photostack figure::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	visibility: visible;
	opacity: 1;
	background: rgba(0,0,0,0.05);
	-webkit-transition: opacity 0.6s;
	transition: opacity 0.6s;
}
figure.photostack-current::after {
	-webkit-transition: opacity 0.6s, visibility 0s 0.6s;
	transition: opacity 0.6s, visibility 0s 0.6s;
	opacity: 0;
	visibility: hidden;
}
.photostack-transition figure {
	-webkit-transition: -webkit-transform 0.6s ease-in-out;
	transition: transform 0.6s ease-in-out;
}
.photostack-perspective {
	-webkit-perspective: 1800px;
	perspective: 1800px;
}
.photostack-perspective > .gallery,
.photostack-perspective figure {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.photostack-perspective figure,
.photostack-perspective figure div {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.photostack-perspective figure.photostack-flip {
	-webkit-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
}
.csstransformspreserve3d figure.photostack-flip .photostack-back {
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
	display: block;
}
.no-csstransformspreserve3d figure.photostack-showback .photostack-back {
	display: block;
}
.no-js .photostack figure {
	box-shadow: -2px 2px 0 rgba(0,0,0,0.05);
}
.no-js .photostack figure::after {
	display: none;
}
.no-js .photostack figure:nth-child(3n) {
	-webkit-transform: translateX(-10%) rotate(5deg);
	transform: translateX(-10%) rotate(5deg);
}
.no-js .photostack figure:nth-child(3n-2) {
	-webkit-transform: translateY(10%) rotate(-3deg);
	transform: translateY(10%) rotate(-3deg);
}
#photostack-1 nav span.current {
	background: #888;
	-webkit-transform: scale(0.61);
	transform: scale(0.61);
}